<template>
	<section class="sp-section sp-disinfect">
		<!-- 第一步 放入提示 -->
		<template v-if="step == 1">
			<view class="sp-disinfect__example">
				<text>示例图</text>
				<image src="../../static/images/disinfect/example1.png" />
			</view>
			<view class="sp-disinfect__tips" style="text-align: center;">
				水温在20-25摄氏度时, <br />
				请拍照上传, 如上图所示
			</view>
			<view style="display: flex; gap: 40rpx; padding: 40rpx;">
				<view class="sp-disinfect__next" @click="jumpStep">跳过</view>
				<view class="sp-disinfect__next" @click="chooseImage(2)">拍摄</view>
			</view>
		</template>
		
		<!-- 第二步 -->
		<template v-if="step == 2">
			<view class="sp-disinfect__example">
				<text>示例图</text>
				<image src="../../static/images/disinfect/example11.png" />
			</view>
			<view class="sp-disinfect__tips" style="text-align: center;">
				45%的消特灵用1:1000的比例; <br>
				25%的消特灵用1:500的比例勾兑, <br>
				完成后拍照上传, 拍照如上图示
			</view>
			<view class="sp-disinfect__next" @click="chooseImage(3)">拍摄</view>
		</template>
		
		<!-- 第三步 放入提示 -->
		<template v-if="step == 3">
			<view class="sp-disinfect__example">
				<text>示例图</text>
				<image src="../../static/images/disinfect/example2.png" />
			</view>
			<view class="sp-disinfect__tips" style="text-align: center;">
				放入全部物资后 <br>
				拍照上传<br>
			</view>
			<view class="sp-disinfect__next" @click="chooseImageSingle">拍摄</view>
		</template>
		
		<template v-if="step == 4">
			<view class="sp-disinfect__example">
				<text>示例图</text>
				<image src="../../static/images/disinfect/example11.png" />
			</view>
			<view class="sp-disinfect__tips" style="text-align: center;">
				确认放入全部物资后 <br>
				取测试纸，测试浓度 <br>
				并拍照上传<br>
			</view>
			<view class="sp-disinfect__next" @click="chooseImageSingle">拍摄</view>
		</template>
		
		<!-- 第四步 是否离开 -->
		<template v-if="step == 5">
			<view class="sp-disinfect__leave">
				<image src="../../static/images/disinfect/leave.png"></image>
			</view>
			<view class="sp-disinfect__tips" style="text-align: center;">
				①工作区域消毒 <br>
				②完成后离开 <br>
				③请选择是否会返回 <br>
			</view>
			<view class="sp-disinfect__control">
			</view>
			<view class="sp-disinfect__next" @click="uptTaskReturn(1)">确定</view>
			<!-- <view style="display: flex; gap: 40rpx; padding: 40rpx;">
				<view class="sp-disinfect__next" @click="backStatus = true">返回</view>
				<view class="sp-disinfect__next" @click="retrnStatus = true">不返回</view>
			</view> -->
		</template>
		
		<template v-if="step == 6">
			<view class="sp-disinfect__example">
				<text>示例图</text>
				<image src="../../static/images/disinfect/example11.png" />
			</view>
			<view class="sp-disinfect__tips" style="text-align: center;">
				①卸掉上层重物 <br>
				②取测试纸，测试浓度，<br>
				③并拍照上传<br>
				④离开<br>
			</view>
			<view class="sp-disinfect__next" @click="chooseImageSingle">拍摄</view>
		</template>
		
		<template v-if="step == 7">
			<view class="sp-disinfect__example">
				<image src="../../static/images/disinfect/sork-success.svg" />
			</view>
			<view class="sp-disinfect__tips" style="text-align: center;">
				消毒浸泡已经30分钟，请及时取走 <br>
			</view>
			<view class="sp-disinfect__next" @click="uptTask">已取走全部消毒物资</view>
		</template>
		
		<!-- 返回 -->
		<u-modal :show="backStatus" title="操作提示" :showCancelButton="true" @cancel="backStatus = false" @confirm="uptTaskReturn(1)">
			<view class="slot-content">
				<rich-text :nodes="backContent"></rich-text>
			</view>
		</u-modal>
		
		<!-- 不返回 -->
		<u-modal :show="retrnStatus" title="操作提示" :showCancelButton="true" @cancel="retrnStatus = false" @confirm="uptTaskReturn(0)">
			<view class="slot-content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</u-modal>
		
	</section>
</template>

<script>
	import { setTask, uploadImage, uptTask } from '@/api/task.js'
	
	export default {
		name: 'spDisinfectDry',
		data() {
			return {
				step: 1,
				form: {
					type: '消毒',
					stage: null
				},
				taskId: 30,
				tempFile: [],
				tempFilePaths: [],
				tempImage: [],
				retrnStatus: false,
				content: '因您选择了不再返回，当前任务您的任务流程已结束，下一步会通知内部人员操作。',
				backStatus: false,
				backContent: '当前任务已开始，请30分钟后来取出浸泡物品。'
			}
		},
		onLoad(options) {
			this.step = options.step || 1
			this.form = {
				...this.form,
				building_id: options.id,
				building_name: options.name,
				title: `${options.name}-浸泡`,
				description: `${options.name}-浸泡-${new Date().getTime()}`,
			}
			this.taskId = options.mid
		},
		methods: {
			jumpStep() {
				this.step++
			},
			// 新建任务
			// 更新任务状态Z
			// 上传图片 1\2
			chooseImage(step) {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['camera'],
					success: (temp) => {
						this.tempFile = this.tempFile.concat(temp.tempFiles)
						this.tempFilePaths = this.tempFilePaths.concat(temp.tempFilePaths)
						this.step = step
						if ((this.step == 2 && this.tempFilePaths.length == 2) || this.step == 3) {
							this.createTask()
						}
					},
					fail: (err) => {
						console.log('err', err)
					},
					complete: () => {
						console.log('调用结束')
					}
				})
			},
			// 新建任务
			createTask() {
				const infos = uni.getStorageSync('aiUserInfo')
				const params = JSON.parse(JSON.stringify(this.form))
				// params.stage = this.step - 1
				// params.images = this.tempImage.join(',')
				setTask(infos.id, params).then(res => {
					if (res && res.id) {
						// this.$u.toast('创建成功')
						this.taskId = res.id
						// this.chooseImage(res.id)
						this.setUploadPics(res.id)
					} else {
						this.$u.toast('任务创建失败')
					}
				}).catch(err => {
					console.log('创建任务失败了', err)
				})
			},
			toBack() {
				// uni.navigateBack()
				// uni.setStorageSync('refresh', true)
				// uni.switchTab({
				// 	url: '/pages/index/index'
				// })
				uni.setStorage({
					key: 'refresh',
					data: true,
					success: () => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}
				})
			},
			// 是否返回
			uptTask() {
				const params = {
					// 1 是 0 否
					stage: 4
				}
				// const infos = uni.getStorageSync('aiUserInfo')
				uptTask(this.taskId, params).then(res => {
					this.$u.toast('取出成功')
					setTimeout(() => {
						this.toBack()
					}, 1000)
				}).catch(err => {
					this.$u.toast('取出失败')
				})
			},
			// 是否返回
			uptTaskReturn(type) {
				const params = {
					// 1 是 0 否
					stage: 3,
					is_return: type
				}
				// const infos = uni.getStorageSync('aiUserInfo')
				uptTask(this.taskId, params).then(res => {
					setTimeout(() => {
						this.toBack()
					}, 1000)
				}).catch(err => {
					this.$u.toast('取出失败')
				})
			},
			// 选择图片
			chooseImageSingle () {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['camera'],
					success: (temp) => {
						this.tempFile = temp.tempFiles
						this.tempFilePaths = temp.tempFilePaths
						this.setUploadPics(this.taskId)
						this.step++
					},
					fail: (err) => {
						console.log('err', err)
					},
					complete: () => {
						console.log('调用结束')
					}
				})
			},
			// 上传图片
			setUploadPics (id) {
				if (this.tempFile.length === 0) {
					this.$u.toast('请先选择图片')
					return false
				}
				const infos = uni.getStorageSync('aiUserInfo')
				const token = uni.getStorageSync('token')
				uni.showToast({
					title: '正在上传...',
					icon: 'loading',
					mask: true,
					duration: 10000
				})
				let uploadImgCount = 0
				for (let i = 0; i < this.tempFile.length; i++) {
					// console.log('ces 装备上传', this.tempFilePaths[i])
					uni.uploadFile({
						url: `${uploadImage}/${infos.id}/${id}`,
						filePath: this.tempFilePaths[i],
						name: 'file',
						header: {
							Authorization: `bearer ${token}`
						},
						success: (res) => {
							uploadImgCount++
							const data = JSON.parse(res.data)
							if (data) {
								uni.hideToast()
								this.tempImage.push(data.filename);
								this.logsTipsStatus = true;
								// if (this.step == 4) {
								// 	this.step = 3
								// }
								// if (this.step = 5) {
								// 	this.step = 6
								// }
								if (uploadImgCount == 2) {
									console.log('上传图片完成')
								}
							}
						},
						fail: (err) => {
							uni.showModal({
								title: '错误提示',
								content: '上传图片失败',
								showCancel: false
							})
						}
					})
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.sp-disinfect__return {
		width: 580rpx;
		padding: 50rpx;
		
		image,
		text {
			display: block;
		}
		
		text {
			font-size: 32rpx;
			color: #150B47;
			text-align: left;
		}
		
		image {
			width: 344rpx;
			height: 248rpx;
			margin: 50rpx auto 0;
		}
	}
</style>